<template>
  <div class="storage-settings">
    <el-card class="settings-card">
      <template #header>
        <div class="card-header">
          <el-icon :size="20"><FolderOpened /></el-icon>
          <span>存储路径配置</span>
        </div>
      </template>

      <el-form label-width="140px" class="settings-form">
        <el-form-item label="当前存储路径">
          <el-input 
            v-model="currentPath" 
            readonly 
            placeholder="加载中..."
          >
            <template #append>
              <el-button :icon="FolderOpened" @click="selectPath">
                选择路径
              </el-button>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item label="路径说明">
          <el-alert
            title="案件数据库文件将存储在此路径的 cases/ 子文件夹中"
            type="info"
            :closable="false"
          />
        </el-form-item>

        <el-form-item label="当前存储占用">
          <div class="storage-info">
            <el-tag type="success">{{ storageSize }}</el-tag>
          </div>
        </el-form-item>
      </el-form>

      <el-divider />

      <h4>日志文件路径</h4>
      <el-form label-width="140px" class="settings-form">
        <el-form-item label="当前日志路径">
          <el-input 
            v-model="currentLogPath" 
            readonly 
            placeholder="加载中..."
          >
            <template #append>
              <el-button :icon="FolderOpened" @click="selectLogPath">
                选择路径
              </el-button>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item label="路径说明">
          <el-alert
            title="日志文件将存储在此路径下的 app.log 文件中"
            type="info"
            :closable="false"
          />
        </el-form-item>
      </el-form>

      <el-divider />

      <div class="warning-section">
        <el-alert
          title="注意事项"
          type="warning"
          :closable="false"
        >
          <ul>
            <li>更改存储路径不会自动迁移现有数据</li>
            <li>请确保新路径有足够的磁盘空间</li>
            <li>建议在更改前备份重要案件数据</li>
            <li><strong>修改日志路径后，必须重启应用才能生效</strong></li>
          </ul>
        </el-alert>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { FolderOpened } from '@element-plus/icons-vue';

const currentPath = ref('');
const currentLogPath = ref('');
const storageSize = ref('计算中...');

onMounted(async () => {
  await loadStoragePath();
  await loadLogPath();
});

async function loadStoragePath() {
  try {
    currentPath.value = await window.electronAPI.config.getStoragePath();
    // TODO: 计算存储占用大小
    storageSize.value = '未实现';
  } catch (error) {
    ElMessage.error('加载存储路径失败: ' + error.message);
  }
}

async function loadLogPath() {
  try {
    currentLogPath.value = await window.electronAPI.config.getLogPath();
  } catch (error) {
    ElMessage.error('加载日志路径失败: ' + error.message);
  }
}

async function selectPath() {
  try {
    const result = await window.electronAPI.file.selectDirectory({
      title: '选择案件数据存储路径'
    });

    if (result) {
      await window.electronAPI.config.setStoragePath(result);
      currentPath.value = result;
      ElMessage.success('存储路径已更新');
    }
  } catch (error) {
    ElMessage.error('设置存储路径失败: ' + error.message);
  }
}

async function selectLogPath() {
  try {
    const result = await window.electronAPI.file.selectDirectory({
      title: '选择日志文件存储路径'
    });

    if (result) {
      const response = await window.electronAPI.config.setLogPath(result);
      currentLogPath.value = result;
      
      if (response.requiresRestart) {
        ElMessage.warning({
          message: '日志路径已更新，需要重启应用才能生效',
          duration: 5000
        });
      } else {
        ElMessage.success('日志路径已更新');
      }
    }
  } catch (error) {
    ElMessage.error('设置日志路径失败: ' + error.message);
  }
}
</script>

<style scoped>
.storage-settings {
  padding: 20px;
  max-width: 800px;
}

.settings-card {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 16px;
}

.settings-form {
  margin-top: 20px;
}

.storage-info {
  font-size: 14px;
}

.warning-section {
  margin-top: 20px;
}

.warning-section ul {
  margin: 10px 0 0 0;
  padding-left: 20px;
}

.warning-section li {
  margin: 5px 0;
}
</style>
